﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<title>HTML5手机绑定获取验证码特效 </title>

<link rel="stylesheet" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="../css/login/weui.min.css">
<link rel="stylesheet" type="text/css" href="../css/login/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="../css/login/demos.css">

</head>
<body>

<form style="margin:8px" action="#" method="post" >
  <h3 class="demos-title" style="margin-bottom:50px; margin-top:50px">手机号绑定</h3>
  <div class="weui_cell">
    <div class="weui_cell_hd">
      <label class="weui_label">手机号：</label>
    </div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="tel" id="tell" name="tell" placeholder="请输入手机号">
    </div>
  </div>
  <div class="weui_cell">
    <div class="weui_cell_hd">
      <label class="weui_label">验证码：</label>
    </div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="certifycode" id="certifycode" name="certifycode" placeholder="请输入验证码">
    </div>
    <div class="weui_cell_ft"> 
    
    <input style="width:95%" type="button" class="weui_btn weui_btn weui_btn_mini weui_btn_primary" value="获取验证码"  onclick="clickButton(this)">  </div>
  </div>
   <div class="weui_cell"></div>
  <div class="weui_btn_area" style="margin-top:80px"> <a class="weui_btn weui_btn_primary" type="submit" id="submit">提交</a> </div>
</form>

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="../script/config.js"></script>
    <script src='../js/layer/2.1/layer.js'></script>
<script type="text/javascript">
function clickButton(obj){
	var phone=$("#tell").val();
	var str = $.trim(phone);
	if(checkphone(str)){
	   	var obj = $(obj);
		  		obj.attr("disabled","disabled");/*按钮倒计时*/
		    	var time = 60;
		   		var set=setInterval(function(){
		  		obj.val(--time+"(s)");
		    }, 1000);/*等待时间*/
		    	setTimeout(function(){
		   		obj.attr("disabled",false).val("重新获取验证码");/*倒计时*/
		  	    clearInterval(set);
		    }, 60000);
     $.ajax({
            type: 'POST',
            url: urls+'/sendMessage/send',
            data:JSON.stringify(str),
            contentType: "application/json",
            success: function(req){
                console.log(req.code);
                if(req.code==0){
                    layer.msg("验证码发送成功");
                }else {
                    layer.msg("验证码发送失败");
                }

            },
            error:function(){
                layer.msg("请求失败");
            }

        });
	}else{
		layer.msg("请输入正确的手机号");
	}
   
}
 $("#submit").click(function(){
 		var codes=$("#certifycode").val();
        codes=$.trim(codes);
        var phone=$("#tell").val();
        var str=$.trim(phone);
        var userData={
		 	 mobileNumber: str,  
			 code:codes        
          }
        	$.ajax({
            type: 'POST',
            url: urls+'/sysUser/frontFindByUser',
            data:JSON.stringify(userData),
            contentType: "application/json",
            success: function(req){
           	 
                console.log(req);
                if(req==2){
                    layer.msg("验证码错误");
                }else if(req==0){
                    layer.msg("没有此用户");
                }else{
                	layer.msg("登陆成功");
                	window.location.href="index.html";
                }

            },
            error:function(){
                layer.msg("请求失败");
            }

	 });
})
                   
	function checkphone(phone) {
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(phone))
            {
                return false;
            }
            else {
                return true;
			}
        }
</script>
</body>
</html>

